<template>
  <div>
    <h3>评论的公共组件----</h3>
    <hr />
    <!-- 发表评论 框框 和button -->
    <textarea placeholder="请输入" maxlength="120" v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="postmsg">发表评论</mt-button>

    <!-- 评论列表 -->
    <div class="cmt-list">
      <div class="cmt-item" v-for="(item, i) in comments" :key="item.id">
        <div class="cmt-item-title">
          第{{ i + 1 }} 楼&nbsp;&nbsp;&nbsp;用户:
          {{ item.user_name }} &nbsp;&nbsp;&nbsp;发表时间:
          {{ item.add_time | dateFormat("YYYY-MM-DD") }}
        </div>
        <div class="cmt-item-body">{{ item.content }}</div>
      </div>
    </div>

    <!-- 加载更多 -->
    <mt-button type="primary" size="large" plain @click="getmore"
      >加载更多</mt-button
    >
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      page: 1,
      comments: [],
      msg: "",
    };
  },
  props: ["newid"], //父组件传过来的 属性
  methods: {
    async getCommentByPage() {
      const { data } = await this.$http.get(
        "/api/getcomments/" + this.newid + "/?pageindex=" + this.page
      );
      console.log(data.message);
      this.comments = this.comments.concat(data.message); //拼接第二页的内容
    },
    getmore() {
      this.page++;
      this.getCommentByPage();
    },
    async postmsg() {
      if (this.msg.trim().length <= 0) {
        Toast("请填写内容");
      } else {
        const { data } = await this.$http.post(
          "/api/postcomment/" + this.newid,
          {
            content: this.msg.trim(),
          }
        );
        console.log(data);
        if (data.status === 0) {
          this.comments = [];
          this.getCommentByPage();
        }
      }
    },
  },
  created() {
    this.getCommentByPage();
  },
};
</script>

<style lang="scss" scoped>
textarea {
  font-size: 14px;
}

.cmt-list {
  margin-top: 4px;
  .cmt-item {
    margin-top: 5px;
    line-height: 30px;

    .cmt-item-title {
      display: flex;
      justify-content: space-between;
      background-color: #ddd;
      font-size: 15px;
    }
    .cmt-item-body {
      font-size: 15px;
      text-indent: 2em;
    }
  }
}
</style>
